<template>
    <Tabs v-model="currentTag" type="card" :animated="false">
        <TabPane label="电费流水">
            <Card class="no-border-card">
                <!--标题-->
                <p slot="title">
                    电费流水
                <Button type="primary"
                class="btn-in-top-large"
                @click="exportTable">
                导出清单
                </Button>
                </p>
                <!--标题end-->

                <!--搜索-->
                <Row :gutter="10" style="margin-bottom:15px">
                    <!-- 门店 -->
                    <Col span="3">
                        <Select clearable v-model="branch" filterable placeholder="选择门店" @on-change="getData(1)">
                            <Option v-for="item in branches" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </Col>

                    <!-- 支付状态 -->
                    <Col span="3">
                        <Select v-model="withdrawStatus" @on-change="getData(1)">
                            <Option v-for="item in payStatus" :value="item.value" :key="item.label">{{ item.label }}</Option>
                        </Select>
                    </Col>

                    <!-- 充值状态 -->
                    <Col span="4" v-if="withdrawStatus === 2">
                        <Select v-model="withChargeStatus" @on-change="getData(1)">
                            <Option v-for="item in chargeStatus" :value="item.value" :key="item.label">{{ item.label }}</Option>
                        </Select>
                    </Col>

                    <!-- 提现状态 -->
                    <Col span="4">
                        <Select v-model="withCashStatus" @on-change="getData(1)">
                            <Option v-for="item in cashStatus" :value="item.value" :key="item.label">{{ item.label }}</Option>
                        </Select>
                    </Col>

                    <!-- 时间 -->
                    <Col span="5">
                        <DatePicker style="width:100%" v-model="timeRange" type="daterange" placeholder="充值时间" @on-change="getData(1)" />
                    </Col>

                    <!-- 关键词 -->
                    <Col span="5">
                        <Input v-model="keyword" placeholder="房源编号/地址/租客姓名" icon="ios-search-strong" @on-enter="getData(1)" @on-click="getData(1)" />
                    </Col>
                </Row>
                
                <Row :gutter="16">
                    <Col span="12" class="record-total">
                        <div class="record-total-item">总金额：{{ sum }} 元</div>
                    </Col>
                    <Col span="12" class="record-total">
                        <div class="record-total-item">总笔数：{{total}} 笔</div>
                    </Col>
                </Row>

                <div class="record-card" v-for="(item,index) in datas" :key="index">
                    <Row>
                        <Col span="8" class="record-row">房源编号：{{item.home_name}}</Col>
                        <Col span="8" class="record-row">
                            房源地址：{{''+(item.city || '') + (item.zone || '') + (item.location|| '') + ' - 房间 ' + (item.room_name || '')}}
                        </Col>
                        <Col span="8" class="record-row">支付时间：{{item.time ? new Date(item.time).Format('yyyy-MM-dd HH:mm') : '-'}}</Col>
                    </Row>

                    <Row>
                        <Col span="8" class="record-row">充值方式：{{['-','微信','支付宝'][item.pay_type]}}</Col>
                        <Col span="8" :class="['record-row', item.charge_status === 3 ? 'color-red' : 'color-blue']">支付状态：
                            <strong>{{ item.charge_status | chargeFilter }}</strong>
                        </Col>

                        <Col span="8" class="record-row" v-if="item.poundage_type == 2">
                            <!-- 租客承担 -->
                            充值电量：{{(item.amount*(1-item.charge_poundage_rate)/100/item.price).toFixed(2)}} 度
                        </Col>
                        <Col span="8" class="record-row" v-else>充值电量：{{(item.amount/100/item.price).toFixed(2)}} 度</Col>
                    </Row>

                    <Row>
                        <Col span="8" class="record-row">充值金额：{{item.amount && item.amount/100}} 元</Col>
                        <Col span="8" class="record-row">
                            手续费：{{ (item.amount / 100 * item.charge_poundage_rate).toFixed(2) || '-' }} 元
                            ( {{ ['云丁','商户','租客'][item.poundage_type] }}承担 )
                        </Col>
                        <Col span="8" class="record-row">提现金额：{{item.cash_amount && item.cash_amount/100}} 元</Col>
                    </Row>

                    <Row>
                        <Col span="8" class="record-row">电价：{{item.price || '-'}} 元/度</Col>
                        <Col span="8" class="record-row">租客姓名：{{item.tenant && item.tenant.name}}</Col>
                        <Col span="8" class="record-row">租客电话：{{item.tenant && item.tenant.phone}}</Col>
                    </Row>

                    <Row v-if="item.account_info">
                        <Col span="8" class="record-row">到账账户：{{item.account_info.customer_name || '-'}}</Col>
                        <Col span="8" class="record-row">到账卡号：{{item.account_info.card_no || '-'}}</Col>
                        <Col span="8" class="record-row" v-if="item.pay_type == 1">到账银行名称：{{item.account_info.bank_name || '-'}}</Col>
                        <Col span="8" class="record-row" v-if="item.pay_type == 2 && item.charge_status === 2">提现状态：提现{{['进行中', '成功', '失败'][item.cash_status]}}{{item.cash_remark ? ` (${item.cash_remark}) ` : ''}}</Col>
                    </Row>

                    <Row>
                        <Col span="8" class="record-row">充值订单单号: {{item.serial_no || '-'}}</Col>
                        <Col span="8" :class="['record-row', item.elemeter_charged ? 'color-blue' : 'color-red']" v-if="item.charge_status === 2 && [2, 3].includes(item.charge_status)">电量充值成功: <strong>{{item.elemeter_charged ? '是' : '否'}}</strong></Col>
                    </Row>
                </div>


                <!--分页-->
                <Page :total="total"
                :page-size="size"
                :current.sync="currentPage"
                show-elevator
                @on-change="getData"
                show-total style="text-align:center"></Page>
                <!--分页end-->
            </Card>
        </TabPane>

        <TabPane label="电费代缴" name="pay">
            <auto-deduct v-if="currentTag === 'pay'"></auto-deduct>
        </TabPane>

        <TabPane label="房源电费信息" name="bind">
            <bind-homes v-if="currentTag === 'bind'"></bind-homes>
        </TabPane>
    </Tabs>

</template>

<script>
// import util from '@/libs/util';
import { http, api } from '@/libs/http'
import dataCenter from '@/libs/dataCenter'
import AutoDeduct from './auto-deduct'
import BindHomes from './bind-homes'

const onedayTimeStamp = 24 * 60 * 60 * 1000
let now = Date.now()
let timeBefore3 = now - 3 * onedayTimeStamp
export default {
  name: 'abnormal_report',
  components: {
    BindHomes,
    AutoDeduct
  },
  data () {
    return {
      withCashStatus: -1, // 提现状态
      withChargeStatus: 0, // 充值状态
      currentTag: 0,
      size: 10,
      total: 0,
      currentPage: 1,
      sum: 0,
      keyword: '',
      withdrawStatus: 2,
      status: 0,
      timeRange: [new Date(timeBefore3), new Date(now)],
      branch: null,
      branches: [],
      datas: [],
      payStatus: [ // 充值状态
        {
          value: 0,
          label: '充值状态'
        },
        {
          value: 1,
          label: '未付款'
        },
        {
          value: 3,
          label: '支付失败'
        },
        {
          value: 2,
          label: '支付成功'
        }
      ],
      chargeStatus: [ // 充值状态
        {
          value: 0,
          label: '是否充值成功'
        },
        {
          value: 1,
          label: '充值失败'
        },
        {
          value: 2,
          label: '充值成功'
        }
      ],
      cashStatus: [
        {
          value: -1,
          label: '提现状态'
        },
        {
          value: 0,
          label: '提现中'
        },
        {
          value: 1,
          label: '提现成功'
        },
        {
          value: 2,
          label: '提现失败'
        }
      ],
      list2: [
        {
          value: 0,
          label: '电表入电状态'
        },
        {
          value: 1,
          label: '已支付'
        },
        {
          value: 2,
          label: '已支付并充值电表'
        }
      ]
    }
  },
  created () {
    this.getBranches()
    this.getData(1)
  },

  filters: {
    chargeFilter (status) {
      if (!status) {
        return '未知'
      }

      return ['未付款', '付款成功', '付款失败'][status - 1]
    }
  },

  methods: {
    getBranches () {
      dataCenter.getStores(this, res => {
        if (res) {
          this.branches = this.branches.concat(res)
        }
      })
    },
    getData (page) {
      if (page === 1) {
        this.currentPage = 1
      }
      let params = {
        limit: this.size,
        offset: this.size * (page - 1),
        keyword: this.keyword || null,
        branch_id: this.branch || null,
        charge_status: this.withdrawStatus || null, // 支付状态
        cash_status: this.withCashStatus < 0 ? null : this.withCashStatus, // 提现状态
        elemeter_charged: this.withChargeStatus ? Number(this.withChargeStatus === 2 && this.withdrawStatus === 2) : null,
        begin: this.timeRange[0] ? new Date(this.timeRange[0]).getTime() : null,
        end: this.timeRange[1] ? new Date(this.timeRange[1]).getTime() + onedayTimeStamp : null
      }
      if (this.branch === 0) {
        params.branch_id = 0
      }

      http.request(this, api.tenant_orders, null, params, res => {
        if (res) {
          this.datas = res.orders
          this.total = res.count || 0
          this.sum = res.sum ? res.sum / 100 : 0
        }
        this.isLoadig = false
      })
    },
    exportTable () {
      let params = {
        keyword: this.keyword || null,
        branch_id: this.branch || null,
        charge_status: this.withdrawStatus || null,
        begin: this.timeRange[0] ? new Date(this.timeRange[0]).getTime() : null,
        end: this.timeRange[1] ? new Date(this.timeRange[1]).getTime() + onedayTimeStamp : null
      }
      if (this.branch === 0) {
        params.branch_id = 0
      }
      // 导出报表
      http.exportTable(this, api.tenant_orders_export, null, params)
    }
  }
}
</script>

<style lang="less">
.export-link {
    color: #fff;
    text-decoration: none;
}
.export-link:hover {
    color: #fff;
}

.record-card {
    background: #fff;
    border: 1px solid #dddee1;
    padding: 12px 0 12px 30px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 1px 1px rgba(100, 100, 100, 0.1);
    .record-row {
        margin-top: 10px;
        &.color-blue strong {
            color: #05bac5;
        }
        &.color-red strong {
            color: #f00;
        }
    }
    .record-status {
        display: flex;
        height: 160px;
        align-items: center; /*垂直居中*/
        span {
            margin-left: 10px;
            font-size: 30px;
            color: #ccc;
            font-style: italic;
        }
    }
}
.record-total-item {
    font-size: 30px;
    text-align: center;
    padding: 40px 0;
    // background: #efeff1;
    margin: 10px auto;
    border-radius: 5px;
    border: 1px solid #dddee1;
    // box-shadow: 0 2px 1px 1px rgba(100, 100, 100, 0.1);
}
</style>